<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>列车终将驶向远方</title>
  <link rel="stylesheet" href="https://cdn.staticfile.org/bulma/0.9.3/css/bulma.min.css" crossorigin="anonymous">
  <style>
    .wrapper {
      background-image: linear-gradient( 
        45deg, 
        #BF0406 0%, 
        #FF9C76 99%, 
        rgb(250, 208, 196) 100%
      );
      height: 100vh;
      padding: 0 180px;
      display: flex;
      align-items: center;
    }
    .wrapper .box {
      flex: 1;
    }
    .wrapper .show-info-parent {
      display: flex;
      align-items: center;
    }
    .wrapper .show-info {
      width: 413px;
      height: 257px;
      position: relative;
    }
    .wrapper .show-info>p {
      position: absolute;
    }

    .wrapper .show-info .station {
      top: 35px;
      font-size: 40px;
      font-weight: bold;
    }

    .wrapper .show-info .station-left {
      left: 30px;
    }
    .wrapper .show-info .station-right {
      right: 30px;
    }

    .wrapper .show-info .date {
      position: absolute;
      top: 115px;
      left: 14px;
      font-size: 16px;
      font-weight: 500;
    }

    .wrapper .show-info .date .month {
      margin-left: 12px;
    }

    .wrapper .show-info .date .day {
      margin-left: 8px;
    }

    .wrapper .show-info .coach{
      position: absolute;
      top: 100px;
      right: 60px;
      text-align: center;
      font-size: 16px;
      font-weight: bold;
    }

    .wrapper .show-info .price {
      top: 137px;
      left: 38px;
      font-weight: 500;
    }

    .wrapper .show-info .name {
      top: 188px;
      left: 20px;
      font-size: 18px;
      font-weight: bold;
    }
  </style>
  <script src='https://cdn.staticfile.org/html2canvas/0.4.0/html2canvas.min.js' crossorigin="anonymous"></script>
</head>
<body>
  <div class="wrapper">
    <div class="columns box">
      <div class="column is-two-thirds show-info-parent">
        <div class="show-info">
          <img src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/16b0235cac504a52a48a91172edf1030~tplv-k3u1fbpfcp-watermark.image" title="幸福号列车" crossorigin='anonymous' />
          <p class="station station-left">{{stationFrom}}</p>
          <p class="station station-right">{{stationTo}}</p>
          <div class="date">
            <span>{{year}}</span>
            <span class="month">{{month}}</span>
            <span class="day">{{day}}</span>
          </div>
          <div class="coach">
            <p>{{coachTop}}</p>
            <p>{{coachBottom}}</p>
          </div>
          <p class="price">{{price}}</p>
          <p class="name">{{name}}</p>
        </div>
      </div>
      <div class="column">
        <div class="field">
          <label class="label">出发日期</label>
          <div class="control">
            <input class="input" type="text" placeholder="yyyyMMdd" @change="changeDate">
          </div>
        </div>
        <div class="field">
          <label class="label">始发站</label>
          <div class="control">
            <input v-model.trim="stationFrom" class="input" type="text" placeholder="我这里" maxlength="3" @change="changeCoachInfo">
          </div>
        </div>
        <div class="field">
          <label class="label">到站</label>
          <div class="control">
            <input v-model.trim="stationTo" class="input" type="text" placeholder="你心中" @change="changeCoachInfo">
          </div>
        </div>
        <div class="field">
          <label class="label">姓名</label>
          <div class="control">
            <input v-model="name" class="input" type="text" placeholder="一个幸运的人"  maxlength="10" @change="changeCoachInfo">
          </div>
        </div>
        <div class="field is-grouped">
          <div class="control">
            <button class="button is-link" @click="handleExportData">保存</button>
            <a
              id="exportImgLink"
              style="display: none;"
              :download="exportData.name + '.png'"
            >
          </a>
          </div>
        </div>
      </div>
    </div>
  </div>
  
</body>
<script src='https://cdn.staticfile.org/vue/2.6.14/vue.min.js' crossorigin="anonymous"></script>

<script>
new Vue({
  el: '.wrapper',
  data: {
    stationFrom: '我这里',
    stationTo: '你心中',
    name: '一个幸运的人',
    year: '2022',
    month: '01',
    day: '25',
    coachTop: '',
    coachBottom: '',
    price: '',
    exportData: {
      name: '火车票',
      href: ''
    }
  },
  mounted: function() {
    this.changeCoachInfo()
  },
  methods: {
    changeCoachInfo: function() {
      const src = ['一等座,老板报销,躺着回家', '二等座,年终奖特批,听听歌，看看风景', '无座,提桶跑路,心若自由，路就畅通']
      let info = src[this.getRandomInt(0, 3)].split(',')
      this.coachTop = info[0]
      this.coachBottom = info[2]
      this.price = info[1]
    },
    changeDate: function(e) {
      let date = e.target.value
      if (date.length != 8) {
        return
      }
      this.year = date.substr(0, 4)
      this.month = date.substr(4, 2)
      this.day = date.substr(6, 2)
      this.changeCoachInfo()
    },
    getRandomInt: function(min, max) {
      min = Math.ceil(min);
      max = Math.floor(max);
      return Math.floor(Math.random() * (max - min)) + min; //不含最大值，含最小值
    },
    handleExportData: function() {
      html2canvas(document.querySelector('.show-info'), {
        scale: 2, //放大一倍，使图像清晰一点
        useCORS: true, //（图片跨域相关）
        allowTaint: false, //允许跨域（图片跨域相关）
        onrendered: function(canvas){
          const exportImgLinkEle = document.querySelector('#exportImgLink');
          exportImgLinkEle.href = canvas.toDataURL('image/png');
          exportImgLinkEle.click();  // 执行 <a> 元素的下载
        }
      })
    }
  }
})   
</script>
</html>